<template>
  <div :class="['topsign',TopSignClass]">{{top}}</div>
</template>

<script>
export default {
  props:{
    top:Number
  },
  computed:{
    TopSignClass(){
      switch(this.top){
        case 1: return 'top1-sign'; 
        case 2: return 'top2-sign';
        case 3: return 'top3-sign';
        default: return 'top4-sign';
      }
    }
  }
}
</script>

<style>
.topsign{
  position: absolute;
  top: 20px;
  left: 0px;
  width: 20px;
  line-height: 20px;
  text-align: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-size: 13px;
  color: #fff;
  opacity: .9;
}
.top1-sign{
  background-image: url('~@/assets/img/top1.png');
}
.top2-sign{
  background-image: url('~@/assets/img/top2.png');
}
.top3-sign{
  background-image: url('~@/assets/img/top3.png');
}
.top4-sign{
  background-image: url('~@/assets/img/top4.png');
}
</style>